<template>
  <section class="mx-auto mt-4 text-white md:max-w-6xl">
    <div class="flex flex-wrap gap-5">
      <div class="md:w-[calc(33.333%-20px)]" v-for="(item, index) in articleList" :key="index">
        <nuxt-link :to="'/news/' + item.id">
          <div
            class="flex min-h-[225px] w-full items-center justify-center overflow-hidden rounded-[30px] border border-gray-700"
          >
            <img
              v-if="item.cover"
              class="max-h-[225px] w-full transform select-none overflow-hidden object-cover transition-transform duration-300 hover:scale-110"
              :src="item.cover"
              alt=""
              draggable="false"
            />
            <div v-else class="w-full text-center text-gray-300">暂无封面</div>
          </div>
          <!-- 标签 -->
          <div class="mt-4 flex flex-wrap gap-2 text-xs" style="color: #7857ff" v-if="item.tags || item.tags.length">
            <div class="rounded-md border border-gray-700 px-4 py-2" v-for="(tag, tagIndex) in item.tags" :key="index">
              {{ tag.name }}
            </div>
          </div>

          <!-- 标题 -->
          <h3 class="my-4 text-2xl">
            {{ item.title }}
          </h3>
          <!-- 摘要 -->
          <div class="text-md line-clamp-2 text-gray-300">
            {{ item.summary }}
          </div>
          <div class="mt-2 text-sm text-gray-100">{{ item.createTime }}</div>
        </nuxt-link>
      </div>
    </div>
    <div class="pagination-wrap my-8 flex justify-center">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        :default-current-page="currentPage"
        @current-change="onCurrentPageChange"
        @prev-click="onCurrentPageChange"
        @next-click="onCurrentPageChange"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
const router = useRouter()
const route = useRoute()

const props = defineProps<{
  type: string | number
}>()

let page = Number(route.params.page) || 1

let currentPage = ref(page)

let pageSize = ref(3)
let total = ref(0)

const articleList = ref([])

let { data, error, refresh, execute } = await useAsyncData('getArticle', () => {
  return $fetch('/api/articles', {
    method: 'get',
    key: String(currentPage.value),
    params: {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      categoryId: props.type
    }
  })
})

if (error.value) {
  console.log('获取文章列表报错了')
  console.log(error)
} else {
  if (data.value) {
    articleList.value = data.value.data.list || []
    total.value = data.value.data.total || 0
  }
}

const onCurrentPageChange = async (value: number) => {
  console.log('页码改变', value)
  console.log('props.type', props.type)

  router.push('/news/page/' + value + '?type=' + props.type)
}

watch(
  () => props.type,
  async () => {
    console.log('重新查询')
    router.push('/news/page/1?type=' + props.type + '&t=' + Date.now())

    await refresh()

    // 更新数据
    console.log(data.value)
    if (data.value) {
      articleList.value = data.value.data.list || []
      total.value = data.value.data.total || 0
    }
  }
)
</script>

<style lang="scss" scoped>
:deep(.pagination-wrap) {
  button {
    background: transparent !important;
    color: #fff !important;
  }

  ul {
    gap: 20px;
  }

  ul > li {
    background: transparent;
    color: #fff !important;
    width: 40px;
    height: 40px;
  }

  .is-active {
    border-radius: 50%;
    background: var(--primary-100-gradient, linear-gradient(81deg, #db519e 13.83%, #b14bf4 49.5%, #666bd1 85.32%));
  }
}
</style>
